<template>
  <uni-nav-bar title="考勤" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar rightText="考勤记录"
    @clickRight="navTo('Sale/attendance/attendanceList')"></uni-nav-bar>
  <gwbq-calendar :insert="true" :lunar="true" @change="change" />
  <view class="package_sale">
    <view>事由</view>
    <textarea class="textarea" v-model="subject" placeholder="请简单描述..."></textarea>
    <view class="space-between">
      <view :class="active===0?'active':''" @click="()=>active=-1">请假</view>
      <view :class="active===-1?'active':''" @click="()=>active=0">调休</view>
    </view>
  </view>
  <view class="but" @click="submit()">提交</view>
  <view style="width:100%;height:1px;"></view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { format } from 'date-fns';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const subject = ref('')
  const active = ref(-1)
  const day = ref(format(new Date(), 'yyyy-MM-dd'))
  function change(e : any) {
    day.value = e.year + '-' + e.month + '-' + e.date
    console.log(day.value)
  }
  // day
  function submit() {
    showLoading()
    const payload = {
      staff_id,
      des: subject.value,
      day: day.value,
      type: active.value
    };
    toPublish('staff/addWorkStatus',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          setTimeout(() => {
            subject.value = ''
            navTo('Sale/attendance/attendanceList')
          }, 1000)
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .space-between {
    view {
      width: 49%;
      height: 94rpx;
      background: #558AF1;
      border-radius: 5px;
      text-align: center;
      line-height: 94rpx;
      color: #fff;
    }

    .active {
      background: #D6E4FF;
      color: #333;
    }
  }

  .but {
    width: 360rpx;
    height: 98rpx;
    background: #558AF1;
    border-radius: 5px;
    text-align: center;
    line-height: 98rpx;
    color: #fff;
    margin: 40rpx auto;
  }
</style>
<style>
  .package_sale>>>.textarea {
    width: 100%;
    background: #eee !important;
    border-radius: 5px;
    padding: 15rpx;
    box-sizing: border-box;
    margin: 20rpx 0px;
    height: 100rpx;
  }
</style>